<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./font/iconfont.css">
  <style>
    .btn.active .icon-bofang {
      display: none;
    }
    .btn.active .icon-zanting {
      display: inline-block;
    }
    .btn .icon-zanting {
      display: none;
    }
    
    .btn {
      color: #ee5044;
    }
    .progress {
      width: 100%;
      height: 3px;
      background: #ddd;
      border-radius: 2px;
      position: relative;
      margin: 0 10px;
    }
    .progress-bar {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 0;
      background: #ee5044;
      transition: width .3s;
    }

    .player {
      display: flex;
      align-items: center;
    }
    time {
      color: #a8a8a8;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <!-- 
    播放暂停功能
      audio.play()  // 播放
      audio.pause()  // 暂停
    时间倒计时功能
      audio.duration  // 音频总长
      audio.currentTime  // 当前的播放时间
    播放进度功能
      拿到当前播放事件 / 总时长 * 100% 
      得到的值设置给红色的宽度
    进度跳转功能
      点击进度条 获取到当前点击位置距离进度条最左边的宽度，除以进度条从宽度 乘 总时长 得到应该处在时长位置
    结束后恢复功能
      让所有的元素恢复原状

    两个方法
    audio.play()
    audio.pause()

    两个属性
    audio.duration
    audio.currentTime

    三个事件
    canplay
    timeupdate
    ended
  -->
  <audio src="./a.m4a"></audio>
  <div class="player">
    <div class="btn">
      <i class="iconfont icon-bofang"></i>
      <i class="iconfont icon-zanting"></i>
    </div>
    <div class="progress">
      <i class="progress-bar"></i>
    </div>
    <time>-00:00</time>
  </div>
  <script>
    /* 播放的任务还是audio标签的 */

    var audio = document.querySelector('audio')
    var time = document.querySelector('time')
    var btn = document.querySelector('.btn')
    var progress = document.querySelector('.progress')
    var progressBar = document.querySelector('.progress-bar')
    // console.log(audio.duration)
    var timeFormat = function (time) {
      var 
        mins = Math.floor(time / 60),
        secs = Math.floor(time % 60)
      
      mins = mins < 10 ? '0' + mins : mins
      secs = secs < 10 ? '0' + secs : secs

      return '-' + mins + ':' + secs
    } 

    var setProgressWidth = function (audio, ele) {
      var 
        currentTime = audio.currentTime,
        duration = audio.duration

      ele.style.width = currentTime / duration * 100 + '%'
    }

    audio.addEventListener('canplay', function () {
      var t = timeFormat(audio.duration)
      time.innerText = t
    })
    
    audio.addEventListener('timeupdate', function () {
      // 获取到当前时间 求其和总时间的差 再进行格式化输出到time
      var t = timeFormat(this.duration - this.currentTime)
      time.innerText = t
      setProgressWidth(audio, progressBar)
    })
    
    audio.addEventListener('ended', function () {
      btn.classList.remove('active')
      audio.currentTime = 0
    })

    btn.addEventListener('click', function () {
      // 如果有active表示正在播放，让暂停，如果没有则播放
      if (this.classList.contains('active')) { // 判断btn中是否有类名 active
        this.classList.remove('active')
        audio.pause()
      } else {
        this.classList.add('active')
        audio.play()
      }
    })
    
    progress.addEventListener('click', function (e) {
      var width = e.clientX - this.offsetLeft
      audio.currentTime = width / this.offsetWidth * audio.duration
    })
  </script>
</body>
</html>